import React, {useEffect, useState} from 'react'
import Header from './components/header'
import Search from './components/search'
import Hot from './components/hot'
import {useAreaHook, useHttpHook, useListHook} from '@/hooks'
import {ErrorBoundary} from '@/components'

import './index.less'
import {_getHouseList} from './store'

export default function (props) {
  const [ area, areaLoading ] = useAreaHook()

  let handleSearch = null
  let handleReset = null

  const searchFunc = (onSearch) => {
    handleSearch = onSearch
  }

  const resetFunc = (onReset) => {
    handleReset = onReset
  }

  const {data: house, loading: houseLoading, showLoading: houseShowLoading} = useListHook({
    func: _getHouseList,
    searchFunc,
    resetFunc
  })

  return (
    <ErrorBoundary>
      <div className='home'>
        <Header/>
        {area && <Search handleSearch={handleSearch} handleReset={handleReset} area={area} areaLoading={areaLoading}/>}
        {house && <Hot house={house} houseLoading={houseLoading} showLoading={houseShowLoading}/>}
      </div>
    </ErrorBoundary>
  )
}
